/*
 * @Author: GEOWAY\zhaoweiwen 2565088230@qq.com
 * @Date: 2022-10-31 09:50:42
 * @LastEditors: GEOWAY\zhaoweiwen 2565088230@qq.com
 * @LastEditTime: 2022-12-03 15:30:02
 * @FilePath: \ZhaoWeiwen\mapdemo\map-js-demo\mapboxdemo\mapboxApi\src\js\main.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
// 打包入口文件
import "mapbox-gl/dist/mapbox-gl.css";
import "../css/style.css"; //用import的形式引入css 需要安装npm i css-loader -D 依赖
import mapboxgl from "mapbox-gl"; // or "const mapboxgl = require('mapbox-gl');"
import heightLight from "./HighlightFeatures.js";

console.log("打包测试");
// import 
// Map类
mapboxgl.accessToken =
    "pk.eyJ1Ijoid2VuMTIzIiwiYSI6ImNrOGJpMWhnbzA4eTIzZG8xOXQzZmU5YmQifQ.T1W9vkW6bhbMN1gt5xCG5A";
console.log("hi");
export const map = new mapboxgl.Map({
    container: "map", //地图div容器
    center: [0, 0],//[-122.420679, 37.772537], //地图中心点 Mapbox GL使用经度、纬度坐标顺序（与纬度、经度相反）来匹配GeoJSON
    antialias: false, //是否使用MSAA反锯齿，默认false影响性能优化
    attributionControl: true, // 属性控件，默认true
    bearing: 0, // 地图的初始方位（旋转）
    bearingSnap: 7, //以度为单位的阈值，用于确定地图的方位何时捕捉到北方默认7
    bounds: null, //如果指定了边界，它将覆盖中心和缩放构造函数选项
    boxZoom: true, //则启用“地图缩放”交互
    clickToleranceL: 3, //移动鼠标有效单击的最大像素值
    collectResourceTiming: false, //发出的请求收集资源计时API信息（此信息通常无法从主Javascript线程访问）信息将在相关数据事件的resourceTiming属性中返回
    cooperativeGestures: false, //如果为true，滚动缩放将需要按ctrl或⌘ 滚动时按键以缩放地图
    crossSourceCollisions: true, //来自多个源的符号可以相互冲突 false:运行冲突检测
    customAttribution: null, //要在属性控件中显示的字符串。仅适用于attributionControl控件为True。
    doubleClickZoom: true, //如果为true，则启用“双击以缩放”交互
    dragPan: true, //如果为真，则启用“拖动平移”交互
    dragRotate: true, //如果为True，则启用“拖动到旋转”交互
    fadeDuration: 300, //控件标签淡入淡出动画的持续时间
    failIfMajorPerformanceCave: false, //是否使用软件渲染器
    fitBoundsOptions: null, //初始边界
    hash: false, //地图的位置（缩放、中心纬度、中心经度、方位和俯仰）将与页面URL的哈希片段同步。http://path/to/my/page.html#2.59/39.26/53.07/-24.1/60.
    interactive: true, //不会将鼠标、触摸或键盘侦听器连接到地图，因此它不会对交互做出响应
    keyboard: true, //如果为true，则启用键盘快捷键
    language: null, //表示用于地图数据和UI组件的语言的字符串。只能在Mapbox矢量Tile图层上设置语言
    locale: null, //应用于UI字符串（如控件工具提示）的默认本地化表的修补程序。
    localFontFamily: null, //为本地覆盖所有字形的生成定义CSS字体族
    localIdeographFontFamily: "sans-serif", //统一文字
    logoPosition: "bottom-left", //表示地图上Mapbox文字标记位置的字符串。
    maxBounds: null, //限制地图边界
    maxPitch: 85, //地图的最大间距
    minPitch: 0, //地图的最小间距（0-85
    maxTileCacheSize: null, //给定图层的tile缓存中存储的最大tile数，缓存将根据当前视口动态调整大小
    minTileCacheSize: null, //给定图层的tile缓存中存储的最小tile数，缓存将根据当前视口动态调整大小
    maxZoom: 22, //地图的最大缩放级别（0-24）
    minZoom: 0, //地图的最小缩放级别（0-24）
    optimizeForTerrain: true, //是否启用地形
    pitch: 0, //地图的初始俯仰（倾斜），以远离屏幕平面（0-85）的角度为单位测量
    pitchWithRotate: true, //禁用地图的俯仰（倾斜）控制和“拖动以旋转”交互
    preserveDrawingBuffer: false, //如果为true，则可以使用map.getCanvas.toDataURL（）（）将地图的画布导出为PNG。
    projection: "mercator", //投影方式
    refreshExpiredTiles: true, //瓦片过期后尝试重新请求瓦片。
    renderWorldCopies: true, //如果为true，则世界的多个副本将在-180度和180度经度之外并排渲染。
    scrollZoom: true, //如果为true，则启用“滚动缩放”交互
    style: "mapbox://styles/mapbox/streets-v11", //地图的Mapbox样式。符合Mapbox样式规范中描述的模式的JSON对象，或者是此类JSON的URL。可以接受空值以允许手动添加样式。
    testMode: false, //用库编写单元测试时无效accessToken而生成的错误和警告
    touchPitch: false, //如果为true，则启用“拖动到俯仰”交互
    touchZoomRotate: false, //如果为true，则启用“夹持以旋转和缩放”交互。
    trackResize: true, //如果为true，则当浏览器窗口调整大小时，地图将自动调整大小。
    transformRequest: null, //在Map请求外部URL之前运行回调。回调可用于修改url、设置标头或设置跨源请求的凭据属性
    worldview: null, //设置贴图的世界视图
    zoom: 5, //地图的初始缩放级别。
});
window.map = map;
// 地图交互
document.getElementById("listing-group").addEventListener("change", (e) => {
    debugger;
    const handler = e.target.id;
    if (e.target.checked) {
        map[handler].enable();
    } else {
        map[handler].disable();
    }
});
map.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
const canvas = map.getCanvasContainer();
const geoJson = {
    type: "FeatureCollection",
    features: [
        {
            type: "Feature",
            geometry: {
                type: "Point",
                coordinates: [0, 0],
            },
        },
    ],
};
function onMove(e) {
    const coords = e.lngLat;

    // Set a UI indicator for dragging.
    canvas.style.cursor = "grabbing";

    // Update the Point feature in `geojson` coordinates
    // and call setData to the source layer `point` on it.
    geoJson.features[0].geometry.coordinates = [coords.lng, coords.lat];
    map.getSource("mypoint").setData(geoJson);
}
function onUp(e) {
    const coords = e.lngLat;

    // Print the coordinates of where the point had
    // finished being dragged to on the map.
    coordinates.style.display = "block";
    coordinates.innerHTML = `Longitude: ${coords.lng}<br />Latitude: ${coords.lat}`;
    canvas.style.cursor = "";

    // Unbind mouse/touch events
    map.off("mousemove", onMove);
    map.off("touchmove", onMove);
}
// map加载
map.on("style.load", () => {
    map.setFog({}); // Set t
    map.addSource("mypoint", {
        'type': 'geojson',
        'data': geoJson
    })
    map.addLayer({
        'id': 'mypoint',
        'type': 'circle',
        'source': 'mypoint',
        'paint': {
            'circle-radius': 10,
            'circle-color': '#F84C4C' // red color
        }
    });
    // // 添加图层服务
    // map.addSource('wms-source', {
    //     'type': 'raster',
    //     'tiles': [
    //         // 'https://img.nj.gov/imagerywms/Natural2015?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=Natural2015'
    //     // "http://localhost:8080/geoserver/testNEw/wms?service=WMS&version=1.1.0&request=GetMap&layers=testNEw%3Abj_road&bbox=115.4315044%2C39.4954978%2C117.3692881%2C41.0463536&width=768&height=614&srs=EPSG%3A3857&styles=&format=image/png&TRANSPARENT=TRUE"   
    //     "http://localhost:8080/geoserver/testNEw/wms?service=WMS&version=1.1.0&request=GetMap&layers=testNEw%3Abj_buildings&bbox=116.2813228%2C39.896351%2C116.4805806%2C40.0117852&width=256&height=256&srs=EPSG%3A3857&styles=&format=image/png&TRANSPARENT=TRUE"
    //     ],
    //         'tileSize': 256
    //   });
    //   map.addLayer({
    //       'id': 'wms-layer',
    //       'type': 'raster',
    //       'source': 'wms-source',
    //       'paint': {
    //         'raster-opacity': 0.3
    //       }
    //     },
     
    //   );
      map.addLayer({
        'id': 'wms-test-layer',
        'type': 'raster',
        'source': {
            'type': 'raster',
            'tiles': [
                // "http://localhost:8080/geoserver/testNEw/wms?service=WMS&version=1.1.0&request=GetMap&layers=testNEw%3Abj_buildings&bbox=116.2813228%2C39.896351%2C116.4805806%2C40.0117852&width=256&height=256&srs=EPSG%3A3857&styles=&format=image/png&TRANSPARENT=TRUE"
                "http://localhost:8080/geoserver/topp/wms?service=WMS&version=1.1.0&request=GetMap&layers=topp%3Astates&bbox=-124.73142200000001%2C24.955967%2C-66.969849%2C49.371735&width=768&height=330&srs=EPSG%3A4326&styles=&format=image/png&TRANSPARENT=TRUE"
            ],
            'tileSize': 256
        },
        'paint': {}
    });


      

});
map.on('mouseenter', 'mypoint', () => {
    map.setPaintProperty('mypoint', 'circle-color', '#3bb2d0');
    console.log("canvas", canvas.style.cursor)
    canvas.style.cursor = 'move';
});
map.on('mouseleave', 'mypoint', () => {
    map.setPaintProperty('mypoint', 'circle-color', '#3887be');
    canvas.style.cursor = '';
});
map.on('mousedown', 'mypoint', (e) => {
    // Prevent the default map drag behavior.
    e.preventDefault();
    canvas.style.cursor = 'grab';
    map.on('mousemove', onMove);
    map.once('mouseup', onUp);
});

map.on('touchstart', 'mypoint', (e) => {
    if (e.points.length !== 1) return;
    // Prevent the default map drag behavior.
    e.preventDefault();
    map.on('touchmove', onMove);
    map.once('touchend', onUp);
});
